import { useEffect, useState } from 'react';
import { class_esy, isArray, isEmpty } from 'esy-ui';
import dayjs from 'dayjs';
import { useGlobalStore } from '@/mobx';
import { postSystemNoticeList } from '@/services';
import { Empty, Header, Img } from '@/components';
import { useFormatText, useNavigation } from '@/hooks';
import { ssSetJsonItem } from '@/utils';
import suonaPng from '@/assets/images/common/suona.png';

const types = [
  {
    tKey: 'text_204',
    value: 1,
  },
  {
    tKey: 'text_205',
    value: 2,
  },
  {
    tKey: 'text_206',
    value: 3,
  },
];

function SystemNots() {
  const [list, setList] = useState([]);
  const { changeState } = useGlobalStore();
  // const [openKey, setOpenKey] = useState(null);
  const { text } = useFormatText();
  const [actId, setActId] = useState(1);
  const navigation = useNavigation();

  useEffect(() => {
    changeState('isLoading', true);
    postSystemNoticeList({
      PageIndex: 1,
      PageSize: 100,
      NoticeType: actId,
    })
      .then((res: any) => {
        setList(res?.Data);
      })
      .catch(() => {})
      .finally(() => {
        changeState('isLoading', false);
      });
  }, [actId, changeState]);

  return (
    <div className='bg-body w-full h-full flex flex-col'>
      <Header title='text_101' />
      <div className='flex items-center text-sm bg-white'>
        {types.map((it) => (
          <div
            key={it.tKey}
            className={class_esy(['py-3 px-4', it.value === actId ? 'text-color-21 font-bold' : 'text-desc'])}
            onClick={() => {
              setActId(it.value);
            }}
          >
            {text(it.tKey)}
          </div>
        ))}
      </div>
      <div className='py-3 px-4 flex-1 overflow-y-auto'>
        {isArray(list) && !isEmpty(list) ? (
          list.map((it) => (
            <div
              key={it.Id}
              className='bg-white flex items-center rounded-xl mb-4 py-2.5 px-3 gap-2 overflow-hidden'
              onClick={() => {
                ssSetJsonItem('notice-detail', it);
                navigation('/bet/notice-detail');
              }}
            >
              <Img boxClassName='w-6 h-6' src={suonaPng} />
              <div className='flex-1 overflow-hidden'>
                <div className='flex items-center justify-between flex-1'>
                  <div className='text-base truncate flex-1'>{it.Title}</div>
                  <div className='text-bar text-xs ml-2'>{it.InsertTime ? dayjs(it.InsertTime).format('YYYY-MM-DD') : ''}</div>
                </div>
                <div className='text-bar text-xs truncate pr-5'>{it.Content}</div>
              </div>
            </div>
          ))
        ) : (
          <Empty />
        )}
      </div>
    </div>
  );
}

export default SystemNots;
